<template>
    <div style="height: 100%">
      <a-button @click="add">
          {{$ti18('rxList.add','新增')}}
      </a-button>
      <a-button @click="remove">
          {{$ti18('rxList.delBtn','删除')}}
      </a-button>
      <a-button @click="moveUp">
          {{$comi18('grid.moveUp', '上移')}}
      </a-button>
      <a-button @click="moveDown">
          {{$comi18('grid.movedown', '下移')}}
      </a-button>
      <a-button @click="expand">
          {{$ti18('rxList.openBtn','展开')}}
      </a-button>
      <a-button @click="collapse">
          {{i18n('button.contraction','收缩')}}
      </a-button>
      <a-button @click="addSub">
          {{i18n('button.typeName','上一级')}}
      </a-button>
      <a-button @click="addMain">
          {{i18n('button.enabledOrNot','下一级')}}
      </a-button>
      <a-button @click="getSelected">
          {{i18n('button.default','获取选择的行')}}
      </a-button>
      <rx-grid
        :columns="cols"
        :dataSource="datas"
        ref="table"
        :defaultPageSize="10"
        :pageSizeOptions="['10','30','40']"
        :scroll = "{y:'calc( 100% - 51px )'}"
        :queryParam="queryDatas"
        :allowRowSelect="true"
        :multiSelect="true"
        :showPage="true"
        @rowClick="rowClick"
        @rowDblClick="rowDblClick"
      >
              <span slot="userId" slot-scope="{text,record,index,blur}">
                  <a-input v-model="record.userId" @blur="blur(index,'userId')" />
              </span>
        <span slot="fullname" slot-scope="{text,record,index,blur}">
                  <a-select labelInValue v-model="record.fullname" @blur="blur(index,'fullname',text)">
                      <a-select-option value="1" :key="index">一</a-select-option>
                      <a-select-option value="2" :key="index">二</a-select-option>
                  </a-select>
              </span>
      </rx-grid>
    </div>
</template>

<script>
    import {RxGrid} from "@lowcode/jpaas-common-lib"

    export default {
      name: "Common",
      comments: {
        RxGrid
      },
      data() {
        return {
          cols:[{title:this.$ti18('rxList.index','序号'),dataIndex: 'index',type:'indexColumn',scopedSlots: {customRender: 'index'}},
            {title:this.i18n('title.sortable','可排序'),dataIndex: 'allowSort',type:'checkboxColumn',scopedSlots: {customRender: 'allowSort'}},
            {title:this.i18n('title.key','主键'),dataIndex:'userId',sorter:true,sortField: 'USER_ID_',allowCellEdit:true,scopedSlots: {customRender: 'userId'}},
            {title:this.i18n('title.name','名称'),dataIndex:'fullname',displayField:'fullnames',sorter: true,sortField:'FULLNAME_',allowCellEdit:true,scopedSlots: {customRender: 'fullname'}},
            {title:this.i18n('title.identify','标识'),dataIndex:'userNo',sorter:true,sortField:'USER_NO_'}],
          datas:[],
          //queryDatas:{Q_FULLNAME__S_LK:'test'}
          queryDatas:{}
        }
      },
      created() {
      },
      methods: {
          i18n(name, text, key) {
              return this.$ti18(name, text, "dashboardLang", key);
          },
        expand(){
          this.$refs.table.expand();
        },
        collapse(){
          this.$refs.table.collapse();
        },
        rowClick(record,index){
          // alert(JSON.stringify(record)+"-----"+index)
        },
        rowDblClick(record,index){
          alert(JSON.stringify(record)+"-----"+index)
        },
        add(){
          this.datas=[{index:'1',userId:'',fullname:'1',fullname_name:'一',userNo:'1'},{userId:'e',fullname:'2',userNo:'2'},
            {index:'1',userId:'b',fullname:'3',userNo:'3'},{userId:'g',fullname:'d',userNo:'4'},
            {userId:'j',fullname:'5',userNo:'5'},{userId:'n',fullname:'6',userNo:'6'},
            {userId:'s',fullname:'7',userNo:'7'},{userId:'d',fullname:'8',userNo:'8'},
            {userId:'h',fullname:'9',userNo:'9'},{userId:'k',fullname:'10',userNo:'10'},
            {userId:'i',fullname:'11',userNo:'11'},{userId:'u',fullname:'12',userNo:'12'}];
          //var table=this.$refs.table;
          // table.addRow({'userId':this.count++,fullname:'1',userNo:'1'},0);
          //table.addRows([{'userId':this.count++,fullname:'1',userNo:'1'},{'userId':this.count++,fullname:'1',userNo:'1'}],1);
        },
        remove(){
          var table=this.$refs.table;
          table.removeRows(table.selectedRowKeys);
        },
        addSub(){
          var table=this.$refs.table;
          table.toSub(table.selectedRowKeys);
        },
        addMain(){
          var table=this.$refs.table;
          table.toMain(table.selectedRowKeys);
        },
        getSelected(){
          var table=this.$refs.table;
          alert(JSON.stringify(table.getData()));
        },
        moveUp(){
          var table=this.$refs.table;
          table.moveUp(table.selectedRowKeys);
        },
        moveDown(){
          var table=this.$refs.table;
          table.moveDown(table.selectedRowKeys);
        }
      }
    }
</script>

<style scoped>

</style>